<template>
	<view class="positioning-container">
		<view class="uni-common-mt">
			<view>
				<map ref="map" id="map" :latitude="centerY" :longitude="centerX" :markers="markers" :show-location="true" :scale="scale">
					<!-- <cover-view class="cover">
						<cover-view class="cover_con">
							<cover-view class="cover_con_div">
								<cover-view class="cover_con_name">
									<cover-image src="../../static/images/dh.png"></cover-image>
								</cover-view>
								<cover-view class="cover_con_p">潍坊</cover-view>
							</cover-view>
							<cover-view class="cover_con_div">
								<cover-view class="cover_con_name">
									<cover-image src="../../static/images/tq.png"></cover-image>
								</cover-view>
								<cover-view class="cover_con_p">小雨 22~28°C</cover-view>
							</cover-view>
						</cover-view>
					</cover-view> -->
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	import route from '@/components/draw-map/draw-map.js';
	export default {
		data() {
			return {
				windowHeight: 1200,
				userData: [],
				centerX: 104.052012,
				centerY: 30.689514,
				markers: [],
				scale: 15,
				month: ''
			}
		},
		onLoad(option) {
			this.centerX = this.$utils.getData("centerX")
			this.centerY = this.$utils.getData("centerY")
			uni.checkSession({
				success: function(res) {},
				fail: function(res) {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			})
		},
		onShow() {
			this.windowHeight = uni.getStorageSync("windowHeight")
			this.getUserData()
		},
		methods: {
			/**
			 * 获取用户所有设备
			 */
			getUserData() {
				this.$myRuquest({
					url: "/jsl/user/DeviceLocationById",
					data: {
						"requestParams": {
							"procedure": {
								"p_uid": this.$utils.getData("p_uid")
							}
						}
					}
				}).then(res => {
					this.userData = res
					this.$utils.setData('userdata', res)
					let resmarks = []; // 图标的集合
					res.forEach(item => {
						let mar = this.createMarker(item);
						resmarks.push(mar);
					})
					this.markers = resmarks
					this.getNowLocation()
				})
			},
			/**
			 * 获取当前位置
			 */
			getNowLocation(userdata) {
				if (this.markers.length) {
					this.centerX = this.markers[0].longitude
					this.centerY = this.markers[0].latitude
					// uni.createMapContext("map", this).moveToLocation({
					// 	longitude: this.markers[0].longitude,
					// 	latitude: this.markers[0].latitude
					// })
				} else {
					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							this.centerX = res.longitude
							this.centerY = res.latitude
							// uni.createMapContext("map", this).moveToLocation({
							// 	longitude: res.longitude,
							// 	latitude: res.latitude
							// })
						}
					})
				}
				if (getCurrentPages()[getCurrentPages().length - 1].route=== 'pages/satellite-positioning/satellite-positioning') {
					setTimeout(() => {
						this.getUserData()
					}, 3000)
				}
			},
			toJSON () {},
			/**
			 * 还有地图标识，可以在name上面动手
			 */
			createMarker(point) {
				let latitude = point.latitude;
				let longitude = point.longitude;
				let marker = {
					id: Number(point.id) || 0,
					name: point.name || '',
					latitude: latitude,
					longitude: longitude,
					iconPath: '../../static/images/dingwei.png',
					width: 20,
					height: 32
				};
				return marker;
			}
		}
	}
</script>

<style lang="scss">
	map {
		width: 100%;
		height: 100vh;
	}

	.cover {
		display: flex;
		background: #999;
		position: fixed;
		bottom: 0;
		left: 24rpx;
		width: 94%;
		background: #FFFFFF;
		box-shadow: 0px 0px 10rpx 0px rgba(6, 0, 1, 0.16);
		border-radius: 16rpx 16rpx 0px 0px;
		display: block;
	}

	.cover_con {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		display: -webkit-flex;
	}

	.cover_con_div {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		display: -webkit-flex;
		line-height: 96rpx;
		width: 50%;
		height: 96rpx;
	}

	.cover_con_name {
		margin-left: 35rpx;
	}

	.cover_con_name cover-image {
		width: 60rpx;
		height: 60rpx;
		margin: 18rpx auto;
	}

	.cover_con_p {
		padding-left: 22rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #42BFEC;
		line-height: 96rpx;
	}
</style>
